<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
  <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
  <style type="text/css">
    html,body,.All {
      width: 100%;
      height: 100%;
    }

    .All .layui-tab-content {
      padding: 0 10px;
    }

    .All .layui-tab {
      margin: 0;
    }

    .All .layui-inline .layui-input-inline {
      width: 170px;
    }

    .All .layui-inline .layui-input-inline[lay-date] {
      width: 88px;
    }

    .All .layui-btn {
      padding: 0 10px;
    }
  </style>
</head>

<body id="main">
  <div class="All layui-tab-parent">
    <div class="layui-tab" lay-filter="all-page">
      <ul class="layui-tab-title">
        <li class="layui-this" lay-id="1">表单</li>
        <li lay-id="2">表格</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <blockquote class="layui-elem-quote">插值语法</blockquote>
          <div class="layui-form-item alarm-title">
            <fieldset class="layui-elem-field layui-field-title">
              <legend><span class="field_title" :myAttr="{{insert.attr}}">{{insert.msg}}</span></legend>
            </fieldset>
          </div>
          <blockquote class="layui-elem-quote">绑定事件</blockquote>
          <div class="layui-form-item alarm-title">
            <fieldset class="layui-elem-field layui-field-title">
              <legend><span class="field_title" @click="event.index++" style="cursor: pointer;">点击值加一</span></legend>
            </fieldset>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">当前的值是: {{event.index}}</label>
          </div>
          <blockquote class="layui-elem-quote">条件渲染</blockquote>
          <div class="layui-form-item">
            <label class="layui-form-label" v-if="condition">上面的值是偶数的时候才会出现</label>
          </div>
          <blockquote class="layui-elem-quote">表单渲染</blockquote>
          <div class="layui-form-pane" lay-filter="my-form" v-form="form">
            <div class="layui-form-item alarm-title">
              <fieldset class="layui-elem-field layui-field-title">
                <legend><span class="field_title">1.数据绑定</span></legend>
              </fieldset>
            </div>
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">姓名:</label>
                <div class="layui-input-inline">
                  <input type="text" class="layui-input" name="name" lay-verify="required" lay-verType="tips"
                    lay-reqText="请输入姓名!" placeholder="请输入姓名" />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">年龄:</label>
                <div class="layui-input-inline">
                  <!-- 添加lay-lazy属性 触发检验事件由 输入框值修改 事件修改为 输入框失去焦点事件  -->
                  <input type="text" class="layui-input" name="age" lay-lazy lay-verify="number|required"
                    lay-verType="tips" lay-reqText="请输入年龄!" placeholder="请输入年龄" />
                </div>
              </div>
            </div>
            <div class="layui-form-item alarm-title">
              <fieldset class="layui-elem-field layui-field-title">
                <legend><span class="field_title">2.下拉框渲染</span></legend>
              </fieldset>
            </div>
            <div class="layui-form-item" style="margin: 0;">
              <div class="layui-inline">
                <label class="layui-form-label">爱好:</label>
                <div class="layui-input-inline">
                  <select name="hobby" lay-search lay-clock lay-option="请选择爱好" lay-select="layui.hobbys"
                    lay-filter="hobby"></select>
                </div>
              </div>
            </div>
            <div class="layui-form-item alarm-title">
              <fieldset class="layui-elem-field layui-field-title">
                <legend><span class="field_title">3.单选框</span></legend>
              </fieldset>
            </div>
            <div class="layui-form-item" style="margin: 0;">
              <div class="layui-inline">
                <label class="layui-form-label"><span style="color:red">*</span>性别:</label>
                <div class="layui-input-inline">
                  <input type="radio" name="six" lay-filter="six" value="0" title="男" checked lay-verify="required"
                    lay-verType="tips" lay-reqText="请您选择性别!" />
                  <input type="radio" name="six" lay-filter="six" value="1" title="女" lay-verify="required"
                    lay-verType="tips" lay-reqText="请您选择性别!" />
                </div>
              </div>
            </div>
            <div class="layui-form-item alarm-title">
              <fieldset class="layui-elem-field layui-field-title">
                <legend><span class="field_title">4.多选框</span></legend>
              </fieldset>
            </div>
            <div class="layui-form-item" style="margin-bottom: 0;">
              <div lay-clock class="layui-inline">
                <label class="layui-form-label"><span style="color:red">*</span>小时:</label>
                <div class="layui-input-inline" style="width:600px;max-height:90px;overflow:auto;" v-each="layui.source"
                  mark="arr">
                  <input type="checkbox" name="hour" lay-filter="timeHorizon" :value="{{arr.id}}" :title="{{arr.name}}"
                    lay-verify="required" lay-reqText="请您选择小时!" />
                </div>
              </div>
            </div>
            
            <div class="layui-form-item" style="text-align: center;">
              <div class="layui-inline">
                <button class="layui-btn" @click="submitForm" type="button" title="查看表单结果">
                  确认修改
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-tab-item">
          <MyTable></MyTable>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="../plugin/jquery.min.js"></script>
  <script type="text/javascript" src="../plugin/lodash.min.js"></script>
  <script type="text/javascript" src="../../layui/layui.js"></script>
  <script>
    var MAIN_VIEW;
    layui
      .config({ base: "../../layui/lay" })
      .extend({
        binder: "../../../layui_exts/binder/binder",
        vform: "../../../layui_exts/binder/vform",
        vtable: "../../../layui_exts/binder/vtable",
        index: "../../../layui_exts/binder/index",
      }).use('index');
  </script>
</body>

</html>